<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<input type = "hidden" id = "category" name = "category" value = "location">
<div id="content">
		<div class="content-top"></div>
								

		<div class="wrapper no-top w-main">
			<div class="m-carousel m-box">
				<div class="m-box-inner">
					<div class="wrap-item">

						<div class="item">


							<a href="http://www.travelro.co.kr/destination/Korea/Busan/guide"><img
								src="image/open/0718/bnr_main_busan.jpg" /></a>



						</div>

						<div class="item">




							<li class="">
								<p class="image">
									<a href="http://www.travelro.co.kr/route/3743"><span
										class="dim"></span><img src="image/open/0718/bnr_main_01.jpg" /></a>
								</p>
								<p class="title">
									<a href="http://www.travelro.co.kr/route/3743">[한국] 안개 낀
										강원도 1박 여행</a>
								</p>
								<p class="member">
									by <em>정애림</em>
								</p>
								<p class="desc">안개 자욱한 대관령 양떼 목장에서부터 해변을 달리는 바다 열차까지 빼곡한
									강원도에서의 하루짜리 여행.</p>
							</li>

							<li class="">
								<p class="image">
									<a href="http://www.travelro.co.kr/route/3697"><span
										class="dim"></span><img src="image/open/0718/bnr_main_02.jpg" /></a>
								</p>
								<p class="title">
									<a href="http://www.travelro.co.kr/route/3697">[캐나다] 10년 전,
										195일 간의 여행 기록</a>
								</p>
								<p class="member">
									by <em>vader</em>
								</p>
								<p class="desc">2001년에 떠났던 캐나다 밴쿠버, 단돈 100만원만 가지고 떠난 타지에서 필름
									카메라로 남긴 추억들을 꺼내봤다.</p>
							</li>

							<li class="last">
								<p class="image">
									<a href="http://www.travelro.co.kr/route/1963"><span
										class="dim"></span><img src="image/open/0718/bnr_main_03.jpg" /></a>
								</p>
								<p class="title">
									<a href="http://www.travelro.co.kr/route/1963">[영국] 지금 가장
										떠나고 싶은 런던</a>
								</p>
								<p class="member">
									by <em>민듕</em>
								</p>
								<p class="desc">여름 여행으로 동남아만큼 인기있는 유럽, 그 중에서도 런던에서의 3일 여행기록과
									마켓 정보를 소개한다.</p>
							</li>



						</div>

					</div>
					<div class="control">
						<span class="direct"> <a class="on" href="#">1</a> <a
							class="" href="#">2</a>

						</span> <span class="step"> <a class="prev" href="#">이전</a> <span
							class="bar">|</span> <a class="next" href="#">다음</a>
						</span>
					</div>
				</div>
			</div>
			<script>
				(function() {
					var $carousel = $('div.m-carousel');
					var $wrapItem = $carousel.find('div.wrap-item');
					var $btnDirects = $carousel.find('span.direct>a');
					var $btnSteps = $carousel.find('span.step>a');
					var ITEM_WIDTH = 950;
					var PADDING_LEFT = 14;
					var onItemNo = 1;
					var timer;

					$wrapItem.mouseenter(function() {
						setTimer(false);
					}).mouseleave(function() {
						setTimer(true);
					});

					function setTimer(on) {
						if (on) {
							timer = window.setTimeout(function() {
								slideToItem(onItemNo + 1);
							}, 7000);
						} else {
							window.clearTimeout(timer);
							timer = null;
						}
					}
					function slideToItem(itemNo) {
						if (timer) {
							window.clearTimeout(timer);
							timer = null;
						}
						if (itemNo > $btnDirects.length) {
							itemNo = 1;
						} else if (itemNo < 1) {
							itemNo = $btnDirects.length;
						}
						if (itemNo != onItemNo) {
							$wrapItem.animate({
								left : -(itemNo - 1)
										* (ITEM_WIDTH + PADDING_LEFT)
										+ PADDING_LEFT
							});
							$btnDirects.eq(onItemNo - 1).removeClass('on');
							$btnDirects.eq(itemNo - 1).addClass('on');
							onItemNo = itemNo;
						}
						setTimer(true);
					}
					$btnDirects.click(function(ev) {
						ev.preventDefault();
						slideToItem(parseInt($(this).text()));
					});
					$btnSteps.click(function(ev) {
						ev.preventDefault();
						if ($(this).hasClass('next')) {
							slideToItem(onItemNo + 1);
						} else {
							slideToItem(onItemNo - 1);
						}
					});
					slideToItem(1);
				})();
			</script>

			<div class="section-a">
				<div class="theme-trip m-box">
					<div class="m-box-inner">
						<div class="theme-title">
							<h3>

								<a href="/square/theme/TV">여름이 되면 가장 떠나고 싶은 부산, 추천 여행길</a>


							</h3>
							<p>여름엔 바다 그리고 바다 하면 부산이다. 여름에 가장 떠나고 싶은 부산 여행의 모든 것을 알아보자.</p>
							<a class="link-icon" href="/square/theme"></a>
						</div>
						<ul>

							<li class="">
								<p class="image">
									<a href="/route/3744"><span class="dim"></span><img
										src="/repository/d01/preview/2012/08/01/1343786604769.jpg" /></a>
								</p>
								<p class="title">
									<a href="/route/3744">[숙소] 테마별 가격별 숙소 정보</a>
								</p>
								<p class="member">
									by <em>혹성B612</em>
								</p>
							</li>

							<li class="">
								<p class="image">
									<a href="/route/3467"><span class="dim"></span><img
										src="/repository/d01/preview/2012/08/01/1343786606353.jpg" /></a>
								</p>
								<p class="title">
									<a href="/route/3467">[문화] 시티투어 버스 타고 한 바퀴</a>
								</p>
								<p class="member">
									by <em>마법사세라비</em>
								</p>
							</li>

							<li class="last">
								<p class="image">
									<a href="/route/3738"><span class="dim"></span><img
										src="/repository/d01/preview/2012/08/01/1343786608036.jpg" /></a>
								</p>
								<p class="title">
									<a href="/route/3738">[맛집] 흩어져 있는 맛집 집합</a>
								</p>
								<p class="member">
									by <em>트래블로</em>
								</p>
							</li>

						</ul>
						<div class="clear"></div>
					</div>
				</div>
			</div>
				<script>
					(function() {
						var $wrapper = $('div.area-guide');
						var $guides = $wrapper.find('li');
						var curPage = 1;
						var PAGE_SIZE = 7;
						var maxPage = Math.ceil($guides.length / PAGE_SIZE);

						function showPage(page) {
							curPage = page;
							$guides.show();
							$guides.eq((curPage - 1) * PAGE_SIZE).prevAll()
									.hide();
							$guides.eq(curPage * PAGE_SIZE - 1).nextAll()
									.hide();
							$guides.filter(':visible').last().addClass('last');
						}
						$wrapper.find('a.prev').click(function(ev) {
							ev.preventDefault();
							showPage(curPage == 1 ? maxPage : curPage - 1);
						});
						$wrapper.find('a.next').click(function(ev) {
							ev.preventDefault();
							showPage(curPage == maxPage ? 1 : curPage + 1);
						});
						showPage(1);
					})();
				</script>

				<div class="section-b">
					<div class="keyword-talk m-box">
						<div class="m-box-inner">
							<h3>여행 Talk</h3>
							<a class="more" href="/square/talk">more</a>
							<ul>

								<li class=""><span class="profile"><img
										src="/repository/d01/profile/2010/08/22/1284601232327_s.jpg" /></span>
									<a href="/square/talk"> <span class="arrow"><span></span></span>
										<em class="keyword">[트래블로]</em>관리자님.. 사진 업로드가 안됩니다.. 이거 좀
										해결해주세요...플리즈 http://www.travelro.co....
								</a></li>

								<li class="last"><span class="profile"><img
										src="/repository/d01/profile/2014/07/30/1406696654779_s.jpg" /></span>
									<a href="/square/talk"> <span class="arrow"><span></span></span>
										<em class="keyword">[가입인사]</em> 안녕하세요~
								</a></li>

							</ul>
						</div>
					</div>
				</div>

			<script>
				atto
						.require(
								[ 'atto.maps.SpotMap' ],
								function() {
									var $wrapper = $('div.triphere');
									var $overLink = $wrapper
											.find('a.over-link');
									var $memos = $wrapper.find('li');
									var $map = $wrapper.find('div.map');
									var onIdx = $memos.filter(':visible')
											.index();
									var memoList = atto
											.data('recentTripMemoList');
									var MAX_SIZE = 76;

									function adjustPhotoSize($photo) {
										var width = $photo.width();
										var height = $photo.height();
										if (width && height) {
											if (width > height) {
												$photo
														.css({
															height : MAX_SIZE,
															left : -((width
																	* MAX_SIZE / height) - MAX_SIZE) / 2
														});

											} else {
												$photo
														.css({
															width : MAX_SIZE,
															top : -((height
																	* MAX_SIZE / width) - MAX_SIZE) / 2
														});
											}
											$photo.data('adjust', true);
										} else {
											$photo.load(function() {
												adjustPhotoSize($photo);
											});
										}
									}
									function showTripMemo(idx) {
										var $memo = $memos.hide().eq(idx)
												.show();
										var $photo = $memo
												.find('span.photo>img');
										if (!$photo.data('adjust')) {
											adjustPhotoSize($photo);
										}
										var memo = memoList[idx];
										var data = {
											name : memo.place || 'Here',
											latLng : {
												lat : memo.latitude,
												lng : memo.longitude
											}
										};
										spotMap.clear();
										spotMap.addSpot(data);
										spotMap.setWorldCenter();
										$overLink.attr('href',
												'/triphere/memo/'
														+ memo.memoUid);
									}
									var spotMap = new atto.maps.SpotMap($map, {
										showInfo : false,
										fixLabel : true
									});
									showTripMemo(onIdx);
									window
											.setInterval(
													function() {
														onIdx = onIdx == memoList.length - 1 ? 0
																: onIdx + 1;
														showTripMemo(onIdx);
													}, 3000);

									$overLink.hover(function() {
										$wrapper.addClass('hover');
									}, function() {
										$wrapper.removeClass('hover');
									});
								});
			</script>
			<div class="clear section-clear"></div>
		</div>
	</div>